import * as THREE from 'three';
import { loadRoam } from './loadRoam'
import { Octree } from 'three/examples/jsm/math/Octree.js';
import { OctreeHelper } from 'three/examples/jsm/helpers/OctreeHelper.js';
export function loadModel(app) {
    const oaNames = ['墙', '地板', '房顶', '底部', '天窗栅栏', '展览位屏幕001', '展览位屏幕002', '展览位屏幕003', '展览位屏幕', '中间展览位屏幕002', '中间展览位屏幕003', '中间展览位屏幕004']
    return new Promise((resolve, reject) => {
        let urls = [
            {
                type: 'rgbe',
                url: '/textures/royal_esplanade_1k.hdr',
                onLoad: (texture) => {
                    console.log('object22', texture);
                    texture.mapping = THREE.EquirectangularReflectionMapping;//球形贴图
                    app.envMap = texture
                },
                onError: (error) => {
                    console.log('error', error);
                    reject(error)
                }
            },
            {
                type: 'glb',
                url: '/model/model.glb',
                onLoad: (object) => {
                    console.log('object11', object);
                    app.model = object.scene
                    app.model.rotateY(Math.PI)
                },
                onError: (error) => {
                    console.log('error', error);
                    reject(error)
                }
            },
            {
                type: 'glb',
                url: '/model/Xbot.glb',
                onLoad: (object22) => {
                    console.log('object22', object22);
                    app.model2 = object22.scene
                    app.model2.position.set(0, 0.7, -12)
                    // app.model2.add(app.camera)//把人和相机作为一个整体，相机在人的后面
                    const cameraGroup = new THREE.Group();
                    cameraGroup.add(app.camera);
                    app.model2.add(cameraGroup);
                    app.animation = object22.animations;//动画
                    console.log('app.animation', app.animation);
                    app.playMixer = new THREE.AnimationMixer(object22.scene)
                    // app.playMixer.clipAction(app.animation[6], object22.scene).play()
                    //休息动作
                    const IdleAction = app.playMixer.clipAction(app.animation[2]);
                    //步行动作
                    const WalkAction = app.playMixer.clipAction(app.animation[6]);
                    //跑步动作
                    const RunAction = app.playMixer.clipAction(app.animation[3]);
                    IdleAction.play();
                    WalkAction.play();
                    RunAction.play();
                    IdleAction.weight = 1.0;//默认休息状态
                    WalkAction.weight = 0.0;
                    RunAction.weight = 0.0;
                    let ActionState = IdleAction;//标记当前处于播放状态的动画动作对象
                    // 通过UI按钮控制，切换动画运动状态
                    document.getElementById('Idle').addEventListener('click', function () {
                        ActionState.weight = 0.0;//播放状态动画权重设置为0
                        IdleAction.weight = 1.0;
                        ActionState = IdleAction;
                    })
                    document.getElementById('Run').addEventListener('click', function () {
                        ActionState.weight = 0.0;//播放状态动画权重设置为0
                        RunAction.weight = 1.0;
                        ActionState = RunAction;
                    })
                    document.getElementById('Walk').addEventListener('click', function () {
                        ActionState.weight = 0.0;//播放状态动画权重设置为0
                        WalkAction.weight = 1.0;
                        ActionState = WalkAction;
                    })
                    let leftButtonBool = false;//记录鼠标左键状态
                    //限制视线上下浮动范围开始
                    const angleMin = THREE.MathUtils.degToRad(-15);//角度转弧度
                    const angleMax = THREE.MathUtils.degToRad(5);
                    //限制视线上下浮动范围结束
                    document.addEventListener('mousedown', () => {
                        leftButtonBool = true;
                    });
                    document.addEventListener('mouseup', () => {
                        leftButtonBool = false;
                    });
                    document.addEventListener('mousemove', (event) => {
                        //鼠标左键按下时候，才旋转玩家角色
                        if (leftButtonBool) {
                            app.model2.rotation.y -= event.movementX / 600;
                            cameraGroup.rotation.x -= event.movementY / 600;
                            if (cameraGroup.rotation.x < angleMin) {
                                cameraGroup.rotation.x = angleMin;
                            }
                            if (cameraGroup.rotation.x > angleMax) {
                                cameraGroup.rotation.x = angleMax
                            };
                        }
                    });
                },
                onError: (error) => {
                    console.log('error', error);
                    reject(error)
                }
            }
        ]
        app.interatorLoader(urls, () => {
            console.log('% loaded');
        }, () => {
            app.scene.add(app.model, app.model2)
            loadRoam(app)
            app.worldOctree = new Octree();
            app.model.traverse((obj) => {
                console.log(obj);
                if (obj.isMesh) {
                    if (obj.name == '房顶') {
                        obj.visible = true
                    }
                }
                if (obj.name == '中间展览位' || obj.name == '墙') {
                    app.worldOctree.fromGraphNode(obj);
                    const helper2 = new OctreeHelper(app.worldOctree);
                    helper2.visible = false;
                    app.scene.add(helper2);
                }
                
                if (oaNames.includes(obj.name)) {
                    const basicMaterial = new THREE.MeshBasicMaterial()
                    basicMaterial.map = obj.material.map
                    basicMaterial.color = obj.material.color
                    obj.material = basicMaterial
                }
                if (obj.name == '中间展览位') {
                    obj.material.envMap = app.envMap
                }

            })
        })
        resolve()
    })
}